<template>
  <div class="login">
    <img class="backbgImg" :src="bg" alt="" />
    <div class="content">
      <div class="left">
        <illustration class="illustration" />
      </div>
      <div class="right">
        <div class="right-content">
          <Motion :delay="100">
            <div class="right-top">
              <avatar class="avatar" />
              <div class="right-title">PUREADMIN</div>
            </div>
          </Motion>
          <el-form
            ref="ruleFormRef"
            style="max-width: 600px; margin-top: 15px"
            :model="ruleForm"
            status-icon
            :rules="loginRules"
            label-width="auto"
            class="demo-ruleForm"
          >
            <Motion :delay="150"
              ><el-form-item prop="user">
                <el-input
                  v-model="ruleForm.user"
                  :prefix-icon="Avatar"
                  placeholder="用户名"
                  style="width: 350px; height: 38px"
                /> </el-form-item
            ></Motion>
            <Motion :delay="200">
              <el-form-item prop="passWord">
                <el-input
                  v-model="ruleForm.passWord"
                  :prefix-icon="Lock"
                  type="password"
                  placeholder="密码"
                  :validate-event="false"
                  style="width: 350px; height: 38px"
                /> </el-form-item
            ></Motion>
            <Motion :delay="250"
              ><el-form-item prop="identifyCode">
                <el-input
                  v-model="ruleForm.identifyCode"
                  :prefix-icon="shield"
                  placeholder="验证码"
                  style="width: 350px; height: 38px"
                  :validate-event="false"
                >
                  <template v-slot:append>
                    <Sidentify @click="refreshCode" />
                  </template>
                </el-input> </el-form-item
            ></Motion>
          </el-form>
          <Motion class="w-full" :delay="300">
            <div class="w-full right-tips">
              <el-checkbox
                v-model="isDontLogin"
                label="七天内免登录"
                size="large"
              />
              <span class="forgetPassword">忘记密码？</span>
            </div></Motion
          >
          <Motion :delay="350" class="w-full">
            <el-button
              type="primary"
              class="w-full mt-4"
              :loading="loading"
              @click="submitForm(ruleFormRef)"
              >登录</el-button
            >
            <!-- <template v-slot>
              <el-button type="primary" class="w-full mt-4">登录</el-button>
            </template> -->
          </Motion>
        </div>
      </div>
      <div class="footer">
        <div>Copyright © 2020-2024</div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted } from "vue";
import { useRouter } from "vue-router";
import bg from "@/assets/login/bg.png";
import illustration from "@/assets/login/illustration.svg?component";
import avatar from "@/assets/login/avatar.svg?component";
import shield from "@/assets/login/shield.svg?component";
import Sidentify from "./components/Sidentify.vue";
import { setItem, getItem } from "@/utils/common.ts";
import { Avatar, Lock } from "@element-plus/icons-vue";
import { loginRules } from "./utils/rules";
import { initRouter } from "@/router/utils";
// import Motion from '@/components/motion/index.ts'
import "@/style/login.less";
// import axios from "axios";
import { login } from "@/api/api.ts";

const router = useRouter();

const currentPage = ref(0);
const isDontLogin = ref(false);
const loading = ref(false);
const ruleFormRef = reactive();
const ruleForm = reactive({
  user: "",
  passWord: "",
  identifyCode: "",
});

const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    if (valid) {
      login({
        userName: ruleForm.user,
        passWord: ruleForm.passWord,
      }).then((res) => {
        if (res.success) {
          sessionStorage.setItem('token',res.data.accessToken)
          console.log(res.data);
          setItem('user',JSON.stringify(res.data))
          initRouter().then((res) => {
            router.push("/welcome");
          });
        }
      });
    } else {
      console.log("error submit!", fields);
    }
  });
};
</script>

<style></style>
